@import 'themes.scss';

// 进度条颜色修改为主题色
body #nprogress .bar {
	background-color: var(--el-color-primary) !important;
}
body #nprogress .peg {
	box-shadow: 0 0 10px var(--el-color-primary), 0 0 5px var(--el-color-primary) !important;
}
body #nprogress .spinner-icon {
	border-top-color: var(--el-color-primary) !important;
	border-left-color: var(--el-color-primary) !important;
}

.el-table {
	--el-table-header-background-color: var(--system-header-table-background) !important;
}

.el-header {
	--el-header-padding: 0;
}

// 菜单部分
.el-menu--horizontal {
	--el-menu-bg-color: transparent;
	height: 40px;
	border-bottom: 0;
	> li {
		margin-left: 10px !important;
	}
	> .el-menu-item,
	> .el-sub-menu .el-sub-menu__title {
		color: #819cc5;
		font-size: 20px;
		border-radius: 16px;
		padding-right: var(--el-menu-base-level-padding);
	}

	> .el-sub-menu {
		.el-sub-menu__title {
			border-bottom: 0 !important;
		}
		.el-sub-menu__icon-arrow {
			display: none;
		}
	}
	> .el-menu-item.is-active,
	> .el-menu-item:not(.is-disabled):focus,
	> .el-menu-item:not(.is-disabled):hover,
	> .el-sub-menu.is-active .el-sub-menu__title,
	> .el-sub-menu .el-sub-menu__title:focus,
	> .el-sub-menu .el-sub-menu__title:hover {
		transition: all var(--el-transition-duration-fast);
		background: linear-gradient(180deg, rgba(44, 126, 254, 0) 38%, #3786ff 167%);
		box-shadow: 0px 2px 2px 0px #0d1f43, inset 0px -1px 2px 0px rgb(255 255 255 / 30%);
		> span {
			background: linear-gradient(180deg, #ffffff 13%, #3b81eb 119%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-shadow: 0px 1px 2px 0px #071a3d;
			font-weight: bold;
		}
	}
}

.el-popper.is-light {
	border: 0;
	background: transparent;
	.el-menu--popup {
		min-width: auto;
		.el-menu-item,
		.el-sub-menu__title {
			background: rgba(11, 22, 44, 0.8);
			color: #deedff;
		}
		.el-menu-item:hover,
		.el-sub-menu:hover > .el-sub-menu__title,
		.el-menu-item.is-active,
		.el-sub-menu.is-active > .el-sub-menu__title {
			color: var(--el-menu-active-color);
			transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration);
		}
	}
}

// form表单的问题
@media screen and (max-width: 1920px) {
	.query {
		margin-bottom: -18px !important;
	}
	.el-form {
		margin-bottom: 0;
	}
}

@media screen and (min-width: 1921px) {
	.query {
		margin-bottom: -22px !important;
	}
	.el-form {
		margin-bottom: 0;
	}
}
.el-form--inline .el-form-item {
	margin-right: 10px !important;
}
.el-select,
.el-cascader,
.el-input-number {
	width: 100%;
}

.el-form--label-top .el-form-item__label {
	padding: 0;
}

// bialog
.el-dialog {
	--el-dialog-padding-primary: 10px !important;
	--el-dialog-padding-primary: 15px !important;
	--el-dialog-bg-color: rgb(24, 60, 90) !important;
	border-radius: var(--el-border-radius-base) !important;
	.el-dialog__header {
		border-bottom: 1px solid #f5f5fa;
		margin-right: 0 !important;
		.el-dialog__title {
			font-weight: 600;
			color: var(--el-color-primary);
		}
	}
}

.el-message-box__header {
	.el-dialog__header {
		border-bottom: 1px solid var(--el-color-primary);
		.el-dialog__title {
			font-weight: bolder;
		}
		.el-dialog__headerbtn {
			font-size: 20px;
			.el-dialog__close {
				font-size: 18px;
			}
		}
	}
	.el-dialog__footer {
		border-top: 1px dashed var(--el-color-primary);
	}

	.el-message-box__header {
		border-bottom: 1px solid var(--el-color-primary);
	}
	.el-dialog__body {
		padding: var(--el-dialog-padding-primary) !important;
	}
}

// 级联选择框(单选)
.el-cascader-panel {
	.el-radio {
		position: absolute;
		width: 100%;
		height: 100%;
		right: 0px;
		top: 0;
	}

	.el-radio__input {
		visibility: hidden;
	}

	.el-cascader-node__postfix {
		top: 10px;
	}

	.el-cascader-menu__list {
		max-height: 400px;
	}
}

.el-select .el-input__inner {
	padding-right: 30px;
}

.el-radio-button__inner {
	color: #4458fe;
	font-weight: 700;
}

// 按钮部分
.el-button + .el-button-group,
.el-button-group + .el-button,
.el-button-group + .el-button-group {
	margin-left: 10px;
}

// 表格
.el-table {
	--el-table-text-color: rgba(92, 219, 229, 1) !important;
	--el-table-header-bg-color: rgba(62, 99, 176, 0.2) !important;
	background-color: transparent !important;
	--el-table-tr-bg-color: transparent !important;
	--el-table-border: 1px solid rgba(53, 140, 170, 0.8) !important;

	&__body,
	&__footer,
	&__empty-block,
	&__header {
		width: 100% !important;
	}
	thead {
		color: #fff !important;
	}
	tr {
		background-color: transparent !important;
	}
	.el-table__body {
		border-collapse: separate;
		border-spacing: 0 5px;
	}
	.el-scrollbar__view {
		height: calc(100% - 5px);
	}
}
.el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
	border-bottom: 0 !important;
}

.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
	background: rgba(62, 99, 176, 0.2) !important;
	// color: rgba(242, 227, 140, 1);
}
.el-table__inner-wrapper::before {
	height: 0 !important;
}

// 抽屉
.el-drawer {
	--el-drawer-background-color: var(--el-dialog-background-color, var(--el-color-white));
	--el-drawer-padding-primary: var(--el-dialog-padding-primary, 20px);
	.el-drawer__body {
		background-color: var(--system-container-background);
		display: flex;
		flex-direction: column;
		padding: 0;
		flex: 1;
		height: 0;
	}
	.el-drawer__header {
		margin-bottom: 20px;
		font-size: 18px;
		font-weight: 900;
		margin-bottom: 0;
		font-size: 18px;
		font-weight: 900;
		border-bottom: 1px solid var(--el-button-border-color, var(--el-border-color-base));
		padding-bottom: var(--el-drawer-padding-primary);
	}
}

// 标签
.el-tabs__item {
	font-size: 16px;
	.is-active {
		font-weight: bold;
	}
}

.el-page-header__left {
	margin-right: 20px !important;
	color: var(--el-color-primary);
	transition: all 0.3s;
	.el-page-header__icon {
		margin-right: 0px;
	}
	.el-page-header__title {
		font-size: 16px;
	}
	&::after {
		right: -10px !important;
		transform: translateY(-50%) rotate(19deg) !important;
		background-color: var(--el-color-primary) !important;
	}
	&:hover {
		transform: translateX(-5px);
	}
}

.el-page-header__content {
	font-weight: 900;
}

.el-popover.proppper-class {
	border: none;
	border-radius: 4px;
	box-shadow: 0px 4px 16px 0px rgba(179, 192, 231, 0.32);
	padding: 12px 0 0 0;
}

// .el-icon
.el-icon {
	vertical-align: -12%;
}

// tab
.el-tabs__nav-scroll {
	overflow-x: auto !important;
}

.el-popover.el-popper {
	min-width: auto !important;
	border: 0;
	border-radius: 10px;
}
.el-cascader-panel .el-cascader-node__postfix {
	top: 0 !important;
}
.el-button {
	height: auto !important;
}
.el-empty {
	--el-empty-image-width: 50px !important;
}
//下拉选择
.el-select {
	.el-input__wrapper {
		background-color: rgba(3, 15, 39, 0.4);
		box-shadow: 0 0 0 1px rgba(77, 107, 209, 0.7) inset !important;
		.el-input__inner {
			color: #deedff !important;
			padding-right: 0px !important;
		}
	}
	&:hover {
		.el-input__wrapper {
			box-shadow: 0 0 0 2px rgba(77, 107, 209) inset !important;
		}
	}
}
.el-select__popper {
	background-color: rgba(3, 15, 39, 0.4) !important;
	border: 2px solid rgba(77, 107, 209) !important;
	.el-popper__arrow {
		&::before {
			border: 2px solid rgba(77, 107, 209) !important;
		}
	}

	.el-select-dropdown__item {
		background: transparent;
		color: #deedff;
		&:hover {
			background: transparent !important;
		}
	}
	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background-color: transparent;
	}
}
//日期样式
.el-date-editor {
	color: #deedff !important;
	background-color: rgba(3, 15, 39, 0.4) !important;
	.el-range-input {
		color: #deedff !important;
	}
	.el-range-separator {
		color: #deedff !important;
	}
}
.el-input__wrapper {
	box-shadow: 0 0 0 1px rgba(77, 107, 209, 0.7) inset !important;
	&:hover {
		box-shadow: 0 0 0 2px rgba(77, 107, 209) inset !important;
	}
}

.el-picker__popper {
	background-color: rgba(3, 15, 39, 0.8) !important;
	border: 2px solid rgba(77, 107, 209) !important;
	.el-picker-panel {
		background-color: rgba(3, 15, 39, 0.8) !important;
		color: #deedff !important;

		.el-picker-panel__sidebar {
			background-color: rgba(3, 15, 39, 0.8) !important;
		}

		.el-icon {
			color: #deedff !important;
		}
		tr {
			th {
				color: #deedff !important;
			}
		}
	}
	.el-popper__arrow {
		&::before {
			border: 2px solid rgba(77, 107, 209) !important;
		}
	}

	.el-date-table td.in-range .el-date-table-cell {
		background-color: #1f314c;

		&:hover {
			background-color: #1f314c;
		}
	}
}

.el-date-picker {
	margin-top: -12px;
	.el-date-picker__header {
		padding-top: 12px;
	}
}

//input样式
.el-textarea__inner {
	background-color: rgba(3, 15, 39, 0.4) !important;
}
.el-input {
	.el-input__wrapper {
		background-color: rgba(3, 15, 39, 0.4) !important;

		.el-input__inner {
			color: #deedff !important;
		}
	}
	.el-input__suffix {
		color: #deedff !important;
	}
}
// 分页器
.el-pagination__total,
.el-pagination__jump {
	color: #f7f8fb !important;
}

.el-button {
	background-color: rgba(3, 15, 39, 0.4) !important;
}

.el-tabs {
	.el-tabs__header {
		margin: 0;
		background: linear-gradient(90deg, rgba(65, 119, 227, 0.5) 21%, rgba(65, 119, 227, 0.1) 93%);
		.el-tabs__nav-wrap::after {
			height: 0;
		}
	}
	.el-tabs__item {
		padding: 0 10px;
		color: var(--el-text-color-placeholder);
	}
	.el-tabs__item.is-active {
		color: var(--el-text-color-primary);
	}
}
